<template>
  <div>
    <nut-menu>
      <nut-menu-item v-model="typeId" :options="typeList" />
      <nut-menu-item v-model="statusId" :options="statusList" />
      <nut-menu-item v-model="time" :options="timeList" />
    </nut-menu>
    <task-card />
    <div>
      <nut-cell
        v-for="(item, index) in list"
        @click="handleClick(item)"
        :key="index"
      >
        <nut-row class="order-card">
          <!-- 基础信息 -->
          <nut-col span="24">
            <nut-cell title="单号" :desc="item.taskNo" />
            <nut-cell title="类型" :desc="item.taskType" />
            <nut-cell title="状态" :desc="item.taskStatusName" />
          </nut-col>
          <!-- 具体信息 -->
          <nut-col title="" span="24">
            <!-- 描述 -->
            <nut-cell title="描述" :desc="item.taskDesc" />
            <!-- 判断是否有轨迹信息 -->
            <nut-steps v-if="item.start != null" progress-dot>
              <!-- 起点 -->
              <nut-step :title="item.start">1</nut-step>
              <!-- 终点 -->
              <nut-step :title="item.end">2</nut-step>
            </nut-steps>
          </nut-col>
          <!-- 时间要求 -->
          <nut-col span="24">
            <nut-cell title="时间" :desc="item.time" />
          </nut-col>
        </nut-row>
      </nut-cell>
    </div>
  </div>
</template>

<script>
import { createApp } from "vue";
import { createRouter, createWebHistory } from "vue-router";
import {
  getTaskType,
  taskStatusList,
  taskTimeList,
  getTask,
} from "../../utils/api";
import { useRouter } from "vue-router";
import Taro from "@tarojs/taro";
export default {
  data() {
    return {
      typeId: 1,
      statusId: 0,
      time: 0,
      typeList: [],
      statusList: [],
      timeList: [],
      list: [],
    };
  },
  methods: {
    handleClick(item) {
      if (item.taskTypeId == 1) {
        Taro.navigateTo({
          url: `/pages/waybilltask/index?id=${item.detailTaskId}`,
        });
      }
    },
  },
  created() {
    getTaskType().then((res) => {
      this.typeList = res.data.data;
      // console.log(typeList.value);
    });
    taskStatusList().then((res) => {
      this.statusList = res.data.data;
      // console.log(statusList.value);
    });
    taskTimeList().then((res) => {
      this.timeList = res.data.data;
      // console.log(timeList.value);
    });
    getTask({ params: { taskType: this.typeId } }).then((res) => {
      this.list = res.data.data;
      // console.log(res);
    });
  },
};
</script>

<style scoped>
.order-card >>> .nut-cell {
  -webkit-box-shadow: var(
    --nut-cell-box-shadow,
    0rem 0rem 0rem 0rem rgb(237, 238, 241)
  );
  box-shadow: var(
    --nut-cell-box-shadow,
    0rem 0rem 0rem 0rem rgb(237, 238, 241)
  );
}
</style> 
  